<template>
  <div>
    <checked-title title="网格员" :width="180"></checked-title>
    <div id="wanggeyuan" style="height:240px" ref="echarts"></div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
export default {
  props:{
    result: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
    }
  },
  mounted() {
    // this.$nextTick(()=>{
    //   this.initChart(this.result)
    // })
  },
  beforeDestroy() {
    this.desHander()
  },
  watch: {
      //监听参数中的 props.markerLists 变化
      'result':{
          handler(newValue, oldValue){
            this.initChart(newValue)
          },
          // 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。
          // 因此请只在必要时才使用它，并且要留意性能。
          deep: true,
       }
  },
  methods: {
    desHander() {
      let myChart = echarts.init(this.$refs.echarts)
      myChart.dispose()
    },
    initChart(dataList) {

      // 扬尘监控
      var chart2 = Highcharts.chart('wanggeyuan', {
        chart: {
          type: 'pie',
          backgroundColor: 'transparent',
          options3d: {
            enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
            alpha: 60, //图表视图旋转角度
          },
        },
        title: {
          text: '',
        },
        legend: {
          // layout: "vertical",
          floating: 'true',
          // align: 'center', //程度标的目标地位
          verticalAlign: 'bottom', //垂直标的目标地位
          x: -20, //间隔x轴的间隔
          y: 10, //间隔Y轴的间隔
          data: ['在线', '离线'],
          itemStyle: {
            color: '#fff',
            fontSize: 12,
          },
          labelFormatter: function() {
            return  this.name + '<b>  ' + this.y + '个'  
          },
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        tooltip: {
          formatter: function() {
            return (
              ' <b> ' +
              this.point.name +
              ' </b>: ' +
              Highcharts.numberFormat(this.percentage, 1) +
              ' %   ' +
              Highcharts.numberFormat(this.y, 0, ' , ')
            )
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            // cursor: "pointer", //鼠标指针
            innerSize: 40,
            depth: 60, //饼图的厚度
            dataLabels: {
              enabled: false, //是否显示饼图的线形tip
            },
          },
        },
        colors: ['rgba(227, 21, 234, 0.45)', 'rgba(248, 181, 81, 0.4)'],
        series: [
          {
            name: '工单类型占比',
            showInLegend: true,
            clockWise: true,
            center: ['45%', '20%'],
            data: [
              ['离线', dataList.userOnlineCount],
              ['在线', dataList.userOfflineCount],
            ],
          },
        ],
      })
    },
  },
}
</script>
<style lang="less" scoped></style>
